extends vue_javascript
extends vue_html
extends vue_css
extends vue_json
extends vue_vux
snippet :)
	$0(
		:class="$1"
	)
# =============== vue tags =========================
snippet @
	@click="$1"
snippet v-t
	v-text="$0"
snippet v-i
	v-if="$0"
snippet v-f
	v-for="${1:item} in $1s"
snippet v-fi
	v-for="(${1:item},index) in $1s"
snippet v-m
	v-model="$0"
snippet v-b
	v-bind="$0"
snippet :c
	:class="$0"
snippet :s
	:src="$0"
snippet v-s
	v-show="$0"
snippet v-o
	@click="$0"
snippet ts
	transition="$0"
#
# template
#
snippet v.im
	import $2 from '../$1/${2:vue}'
snippet v.tp
	<template>
		$0
	</template>
snippet v.js
	<script>
		$0
	</script>
snippet v.js.es6
	<script type="text/ecmascript-6">
		$0
	</script>
snippet v.css
	<style scope>
		$0
	</style>
snippet v.styl
	<style lang="stylus" rel="stylesheet/stylus" scoped>
		$0
	</style>
snippet v.ex
	components: {
	},

	props: {
	},

	data () {
		return {
		}
	},

	computed: {
	},

	methods: {
	},

	mounted () {
	}
snippet },
	},
	${1:methods}: {
		$0
	}
snippet },,
	},
	${1:methods}: {
		$0
	},
snippet },fn
	},
	${1:data} () {
		$0
	}
snippet },fn,
	},
	${1:data} () {
		$0
	},
snippet v.tpl
	<template>
		<div class="`expand("%:t:r")`">
			<p>`expand("%:t:r")`$0 </p>
		</div>
	</template>

	<script>
	export default {
		name: '`expand("%:t:r")`',
		components: {
		},

		props: {
		},

		data () {
			return {
			}
		},

		mounted () {
		},

		methods: {
		}
	}
	</script>

	<style lang="stylus" rel="stylesheet/stylus">
	@import '~common/stylus/variable.styl'
	@import './`expand("%:t:r")`.styl'
	</style>
snippet v.tpp
	<template lang="pug">
		.${1:`expand("%:t:r")`}
			p $1$0
	</template>

	<script>
	export default {
		name: '`expand("%:t:r")`',
		components: {
		},

		props: {
		},

		data () {
			return {
			}
		},

		computed: {
		},

		watch: {
		},

		methods: {
		},

		mounted () {
		}

	}
	</script>

	<style lang="stylus" rel="stylesheet/stylus">
	@import '~common/stylus/variable.styl'
	@import './`expand("%:t:r")`.styl'
	</style>
snippet x.tpp
	<template lang="pug">
		.${2:$1}
			x-header(slot="header",
				style="width:100%;position:fixed;left:0;top:0;z-index:100;",
				:right-options="{showMore: true}",
				@on-click-more="showMenus = true"
			) list
			actionsheet(:menus="menus", v-model="showMenus", show-cancel)
			div(class="vux-demo")
			group(title="cell demo")
				cell(title="Vux", value="Cool", is-link)

			tabfooter(:path="path")
	</template>

	<script>
	import {
		Tabbar, TabbarItem,
		XHeader, Actionsheet,
		Group,
		Cell
	} from 'vux'
	import tabfooter from '../common/tabfooter/tabfooter'

	export default {
		name: '`expand("%:t:r")`',
		components: {
			XHeader,
			Actionsheet,
			Tabbar,
			TabbarItem,
			Group,
			Cell,
			tabfooter
		},
		data () {
			return {
				path: '',
				menus: {
					menu1: 'Take Photo',
					menu2: 'Choose from photos'
				},
				showMenus: false
			}
		},

		props: {
		},

		computed: {
		},

		methods: {
		},

		mounted () {
			this.path = this.$route.path
		}
	}
	</script>

	<style lang="stylus" rel="stylesheet/stylus">
	@import '../../assets/stylus/common.styl'
	@import './${1:`expand("%:t:r")`}.styl'
	</style>
snippet v.tpd
	<template lang="pug">
		${1:.}${2:`expand("%:t:r")`}
			p $2$0
	</template>

	<script type="text/ecmascript-6">
		import { js } from './`expand("%:t:r")`-vue.js'
		export default js.call(this)
	</script>

	<style lang="stylus" rel="stylesheet/stylus" scoped>
		@import '~common/stylus/variable.styl'
		@import './`expand("%:t:r")`.styl'
	</style>
snippet v.slide
	transition(name="slide")
snippet v.tps
	<template>
		<div>
			$0
		</div>
	</template>

	<script type="text/ecmascript-6">
	</script>

	<style lang="stylus" rel="stylesheet/stylus">
	</style>
snippet v.dat
	`system("date +%Y-%m-%d")`
snippet v.f
	`expand("%:r")`
